<template>
  <div class="box">
    <div class="box-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <h6 class="pt-3">To-Do List Overview</h6>
          </div>
          <div class="col-lg-3">
            <div class="card">
              <div class="card-body">
                <div class="taskbox">
                  <div class="taskbox__icon">
                    <svg
                      width="35px"
                      height="35px"
                      fill="#ae6eea"
                      version="1.1"
                      id="Capa_1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      x="0px"
                      y="0px"
                      viewBox="0 0 438.891 438.891"
                      style="enable-background: new 0 0 438.891 438.891;"
                      xml:space="preserve"
                    >
                      <g>
                        <g>
                          <g>
                            <path
                              d="M347.968,57.503h-39.706V39.74c0-5.747-6.269-8.359-12.016-8.359h-30.824c-7.314-20.898-25.6-31.347-46.498-31.347                                                                    c-20.668-0.777-39.467,11.896-46.498,31.347h-30.302c-5.747,0-11.494,2.612-11.494,8.359v17.763H90.923                                                                    c-23.53,0.251-42.78,18.813-43.886,42.318v299.363c0,22.988,20.898,39.706,43.886,39.706h257.045                                                                    c22.988,0,43.886-16.718,43.886-39.706V99.822C390.748,76.316,371.498,57.754,347.968,57.503z M151.527,52.279h28.735                                                                    c5.016-0.612,9.045-4.428,9.927-9.404c3.094-13.474,14.915-23.146,28.735-23.51c13.692,0.415,25.335,10.117,28.212,23.51                                                                    c0.937,5.148,5.232,9.013,10.449,9.404h29.78v41.796H151.527V52.279z M370.956,399.185c0,11.494-11.494,18.808-22.988,18.808                                                                    H90.923c-11.494,0-22.988-7.314-22.988-18.808V99.822c1.066-11.964,10.978-21.201,22.988-21.42h39.706v26.645                                                                    c0.552,5.854,5.622,10.233,11.494,9.927h154.122c5.98,0.327,11.209-3.992,12.016-9.927V78.401h39.706                                                                    c12.009,0.22,21.922,9.456,22.988,21.42V399.185z"
                            ></path>
                            <path
                              d="M179.217,233.569c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629                                                                    c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135                                                                    c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025                                                                    C179.628,233.962,179.427,233.761,179.217,233.569z"
                            ></path>
                            <path
                              d="M329.16,256.034H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16                                                                    c5.771,0,10.449-4.678,10.449-10.449S334.931,256.034,329.16,256.034z"
                            ></path>
                            <path
                              d="M179.217,149.977c-3.919-4.131-10.425-4.364-14.629-0.522l-33.437,31.869l-14.106-14.629                                                                    c-3.919-4.131-10.425-4.364-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135                                                                    c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025                                                                    C179.628,150.37,179.427,150.169,179.217,149.977z"
                            ></path>
                            <path
                              d="M329.16,172.442H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16                                                                    c5.771,0,10.449-4.678,10.449-10.449S334.931,172.442,329.16,172.442z"
                            ></path>
                            <path
                              d="M179.217,317.16c-3.919-4.131-10.425-4.363-14.629-0.522l-33.437,31.869l-14.106-14.629                                                                    c-3.919-4.131-10.425-4.363-14.629-0.522c-4.047,4.24-4.047,10.911,0,15.151l21.42,21.943c1.854,2.076,4.532,3.224,7.314,3.135                                                                    c2.756-0.039,5.385-1.166,7.314-3.135l40.751-38.661c4.04-3.706,4.31-9.986,0.603-14.025                                                                    C179.628,317.554,179.427,317.353,179.217,317.16z"
                            ></path>
                            <path
                              d="M329.16,339.626H208.997c-5.771,0-10.449,4.678-10.449,10.449s4.678,10.449,10.449,10.449H329.16                                                                    c5.771,0,10.449-4.678,10.449-10.449S334.931,339.626,329.16,339.626z"
                            ></path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <div class="taskbox__text">
                    <div class="taskbox__text--numbers">26</div>
                    <div class="taskbox__text--heading">Number of Tasks</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card">
              <div class="card-body">
                <div class="taskbox">
                  <div class="taskbox__icon">
                    <svg
                      width="35px"
                      height="35px"
                      fill="#ae6eea"
                      version="1.1"
                      class="Layer_1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      x="0px"
                      y="0px"
                      viewBox="0 0 503.607 503.607"
                      style="enable-background: new 0 0 503.607 503.607;"
                      xml:space="preserve"
                    >
                      <g transform="translate(1 1)">
                        <g>
                          <g>
                            <path
                              d="M385.098,57.754h-41.967v-8.393c0-9.233-7.554-16.787-16.787-16.787h-25.18V24.18c0-14.269-10.911-25.18-25.18-25.18                                                            h-50.361c-14.269,0-25.18,11.751-25.18,25.18v8.393h-25.18c-9.233,0-16.787,7.554-16.787,16.787v8.393h-41.967                                                            c-23.502,0-41.967,18.466-41.967,41.967v360.918c0,23.502,18.466,41.967,41.967,41.967h268.59                                                            c23.502,0,41.967-18.466,41.967-41.967V99.721C427.066,76.22,408.6,57.754,385.098,57.754z M175.262,49.361h33.574                                                            c5.036,0,8.393-3.357,8.393-8.393V24.18c0-5.036,3.357-8.393,8.393-8.393h50.361c5.036,0,8.393,4.197,8.393,8.393v16.787                                                            c0,5.036,3.357,8.393,8.393,8.393h33.574v16.787v41.967H175.262V66.148V49.361z M410.279,460.639                                                            c0,14.269-10.911,25.18-25.18,25.18h-268.59c-14.269,0-25.18-10.911-25.18-25.18V99.721c0-14.269,10.911-25.18,25.18-25.18                                                            h41.967v33.574c0,9.233,7.554,16.787,16.787,16.787h151.082c9.233,0,16.787-7.554,16.787-16.787V74.541h41.967                                                            c14.269,0,25.18,10.911,25.18,25.18V460.639z"
                            ></path>
                            <path
                              d="M354.043,317.951c-5.036-0.839-9.233,2.518-10.072,6.715c-9.233,46.164-46.164,77.22-90.649,77.22                                                            c-42.601,0-79.462-27.886-92.158-67.148h39.279v-16.787h-48.756c-1.094-0.207-2.215-0.214-3.283,0h-15.108v67.148h16.787v-31.155                                                            c18.142,38.867,57.962,64.729,102.4,64.729c53.718,0,96.525-36.092,108.275-90.649                                                            C361.597,322.987,358.239,318.79,354.043,317.951z"
                            ></path>
                            <path
                              d="M351.525,254.168c-18.75-37.83-56.397-62.119-99.043-62.119c-51.2,0-96.525,33.574-110.793,82.256                                                            c-0.839,4.197,1.679,8.393,5.875,10.072c4.197,0.839,8.393-1.679,10.072-5.875c11.751-40.289,52.039-69.666,94.846-69.666                                                            c38.211,0,72.239,22.967,86.895,58.754h-38.213v16.787h67.148v-67.148h-16.787V254.168z"
                            ></path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <div class="taskbox__text">
                    <div class="taskbox__text--numbers">05</div>
                    <div class="taskbox__text--heading">Task in Progress</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card">
              <div class="card-body">
                <div class="taskbox">
                  <div class="taskbox__icon">
                    <svg
                      width="35px"
                      height="35px"
                      fill="#ae6eea"
                      version="1.1"
                      class="Layer_1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      x="0px"
                      y="0px"
                      viewBox="0 0 503.607 503.607"
                      style="enable-background: new 0 0 503.607 503.607;"
                      xml:space="preserve"
                    >
                      <g transform="translate(1 1)">
                        <g>
                          <g>
                            <path
                              d="M385.098,57.754h-41.967v-8.393c0-9.233-7.554-16.787-16.787-16.787h-25.18V24.18c0-14.269-10.911-25.18-25.18-25.18                                                            h-50.361c-14.269,0-25.18,11.751-25.18,25.18v8.393h-25.18c-9.233,0-16.787,7.554-16.787,16.787v8.393h-41.967                                                            c-23.502,0-41.967,18.466-41.967,41.967v360.918c0,23.502,18.466,41.967,41.967,41.967h268.59                                                            c23.502,0,41.967-18.466,41.967-41.967V99.721C427.066,76.22,408.6,57.754,385.098,57.754z M175.262,49.361h33.574                                                            c5.036,0,8.393-3.357,8.393-8.393V24.18c0-5.036,3.357-8.393,8.393-8.393h50.361c5.036,0,8.393,4.197,8.393,8.393v16.787                                                            c0,5.036,3.357,8.393,8.393,8.393h33.574v16.787v41.967H175.262V66.148V49.361z M410.279,460.639                                                            c0,14.269-10.911,25.18-25.18,25.18h-268.59c-14.269,0-25.18-10.911-25.18-25.18V99.721c0-14.269,10.911-25.18,25.18-25.18                                                            h41.967v33.574c0,9.233,7.554,16.787,16.787,16.787h151.082c9.233,0,16.787-7.554,16.787-16.787V74.541h41.967                                                            c14.269,0,25.18,10.911,25.18,25.18V460.639z"
                            ></path>
                            <path
                              d="M356.561,281.02l-11.751-2.518c-5.875-0.839-10.072-5.036-12.59-10.072c-2.518-5.875-1.679-10.911,1.679-15.948                                                            l7.554-10.072c2.518-3.357,1.679-8.393-0.839-10.911l-16.787-16.787c-3.357-2.518-7.554-3.357-10.911-0.839l-10.072,6.715                                                            c-5.036,3.357-10.911,4.197-15.948,1.679c-5.875-2.518-9.233-6.715-10.072-12.59l-1.679-12.59                                                            c-0.839-3.357-4.197-6.715-8.393-6.715h-23.502c-4.197,0-7.554,2.518-8.393,6.715l-3.357,15.948                                                            c-0.839,5.875-5.036,10.072-10.072,12.59c-5.875,1.679-10.911,1.679-15.948-1.679l-13.43-9.233                                                            c-3.357-2.518-8.393-1.679-10.911,0.839l-16.787,16.787c-2.518,3.357-3.357,7.554-0.839,10.911l7.554,10.072                                                            c3.357,5.036,4.197,10.911,1.679,15.948c-2.518,5.036-6.715,9.233-12.59,10.072l-11.751,2.518                                                            c-4.197,0.839-6.715,4.197-6.715,8.393v23.502c0,4.197,2.518,7.554,6.715,8.393l12.59,1.679                                                            c5.875,0.839,10.072,5.036,12.59,10.072c2.518,5.036,1.679,10.911-1.679,15.948l-6.715,10.072                                                            c-2.518,3.357-1.679,8.393,0.839,10.911l16.787,16.787c3.357,2.518,7.554,3.357,10.911,0.839l10.072-7.554                                                            c5.036-3.357,10.911-3.357,15.948-1.679c5.036,2.518,9.233,6.715,10.072,12.59l2.518,11.751c0.839,4.197,4.197,6.715,8.393,6.715                                                            h23.502c4.197,0,7.554-2.518,7.554-5.875l1.679-9.233c0.839-5.875,5.036-10.072,10.072-12.59s10.911-1.679,15.948,1.679                                                            l7.554,5.036c3.357,2.518,8.393,1.679,10.911-0.839l16.787-16.787c2.518-3.357,3.357-7.554,0.839-10.911l-6.715-10.072                                                            c-3.357-5.036-4.197-10.911-1.679-15.948c2.518-5.036,7.554-8.393,16.787-11.751l12.59-1.679                                                            c3.357-0.839,6.715-4.197,6.715-8.393v-23.502C363.275,285.216,360.757,281.859,356.561,281.02z M342.292,307.879l-5.875,0.839                                                            c-10.911,1.679-20.984,8.393-25.18,19.305c-4.197,10.072-3.357,22.662,3.357,31.895l4.197,4.197l-6.715,6.715l-1.679-0.839                                                            c-10.072-7.554-21.823-8.393-32.734-4.197c-10.911,5.036-18.466,14.269-20.144,26.02v1.679h-9.233l-1.679-5.036                                                            c-1.679-10.911-9.233-20.144-20.144-24.341c-10.911-4.197-22.662-2.518-31.895,4.197l-4.197,3.357l-6.715-6.715l2.518-5.036                                                            c6.715-9.233,7.554-21.823,3.357-31.895c-4.197-10.072-13.43-17.626-25.18-19.305l-5.875-0.839v-9.233l5.875-1.679                                                            c10.911-1.679,20.144-9.233,24.341-20.144c4.197-10.911,2.518-22.662-4.197-31.895l-3.357-4.197l6.715-6.715l7.554,5.036                                                            c9.233,6.715,20.984,7.554,31.056,3.357c10.911-4.197,17.626-13.43,20.144-24.341l1.679-9.233h9.233l0.839,6.715                                                            c1.679,10.911,8.393,20.984,19.305,25.18c10.072,4.197,22.662,3.357,31.895-3.357l4.197-3.357l6.715,7.554l-3.357,4.197                                                            c-6.715,9.233-8.393,20.984-4.197,31.895c4.197,10.072,13.43,17.626,24.341,20.144l5.036,0.839V307.879z"
                            ></path>
                            <path
                              d="M250.803,259.197c-23.502,0-41.967,18.466-41.967,41.967s18.466,41.967,41.967,41.967s41.967-18.466,41.967-41.967                                                            S274.305,259.197,250.803,259.197z M250.803,326.344c-14.269,0-25.18-10.911-25.18-25.18s10.911-25.18,25.18-25.18                                                            c14.269,0,25.18,10.911,25.18,25.18S265.072,326.344,250.803,326.344z"
                            ></path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <div class="taskbox__text">
                    <div class="taskbox__text--numbers">03</div>
                    <div class="taskbox__text--heading">Tasks in Review</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="card">
              <div class="card-body">
                <div class="taskbox">
                  <div class="taskbox__icon">
                    <svg
                      width="35px"
                      height="35px"
                      fill="#ae6eea"
                      version="1.1"
                      class="Layer_1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      x="0px"
                      y="0px"
                      viewBox="0 0 503.607 503.607"
                      style="enable-background: new 0 0 503.607 503.607;"
                      xml:space="preserve"
                    >
                      <g transform="translate(1 1)">
                        <g>
                          <g>
                            <path
                              d="M385.098,57.754h-41.967v-8.393c0-9.233-7.554-16.787-16.787-16.787h-25.18V24.18c0-14.269-10.911-25.18-25.18-25.18                                                                h-50.361c-14.269,0-25.18,11.751-25.18,25.18v8.393h-25.18c-9.233,0-16.787,7.554-16.787,16.787v8.393h-41.967                                                                c-23.502,0-41.967,18.466-41.967,41.967v360.918c0,23.502,18.466,41.967,41.967,41.967h268.59                                                                c23.502,0,41.967-18.466,41.967-41.967V99.721C427.066,76.22,408.6,57.754,385.098,57.754z M175.262,49.361h33.574                                                                c5.036,0,8.393-3.357,8.393-8.393V24.18c0-5.036,3.357-8.393,8.393-8.393h50.361c5.036,0,8.393,4.197,8.393,8.393v16.787                                                                c0,5.036,3.357,8.393,8.393,8.393h33.574v16.787v41.967H175.262V66.148V49.361z M410.279,460.639                                                                c0,14.269-10.911,25.18-25.18,25.18h-268.59c-14.269,0-25.18-10.911-25.18-25.18V99.721c0-14.269,10.911-25.18,25.18-25.18                                                                h41.967v33.574c0,9.233,7.554,16.787,16.787,16.787h151.082c9.233,0,16.787-7.554,16.787-16.787V74.541h41.967                                                                c14.269,0,25.18,10.911,25.18,25.18V460.639z"
                            ></path>
                            <path
                              d="M250.803,192.049c-60.433,0-109.115,48.682-109.115,109.115s48.682,109.115,109.115,109.115                                                                s109.115-48.682,109.115-109.115S311.236,192.049,250.803,192.049z M250.803,393.492c-51.2,0-92.328-41.128-92.328-92.328                                                                c0-51.2,41.128-92.328,92.328-92.328s92.328,41.128,92.328,92.328C343.131,352.364,302.003,393.492,250.803,393.492z"
                            ></path>
                            <path
                              d="M296.967,252.482c-4.197-2.518-9.233-1.679-11.751,2.518l-44.485,74.702l-26.02-26.02c-3.357-3.357-8.393-3.357-11.751,0                                                                c-3.357,3.357-3.357,8.393,0,11.751l33.574,33.574c1.679,1.679,3.357,2.518,5.875,2.518c0,0,0.839,0,0.839,0.839                                                                c2.518-0.839,4.197-1.679,5.875-4.197l50.361-83.934C302.003,260.036,301.164,255,296.967,252.482z"
                            ></path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                  <div class="taskbox__text">
                    <div class="taskbox__text--numbers">18</div>
                    <div class="taskbox__text--heading">Completed Tasks</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <hr />
        <div class="row1">
          <div class="col-xl-3">
            <div class="taskpanel-title">Tasklist</div>
            <button class="btn">
              <span class="iconfont icon-jiatianjia"></span>
              <span>Add task</span>
            </button>
            <div class="taskpanel">
              <div class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">Shopping App Redesign</div>
                    <div class="taskdate">20/07/2019 at 03:10PM</div>
                  </div>
                  <div class="card-footer">
                    <div class="checklist-number">0/4</div>
                    <div class="taskinfo-footer">
                      <div class="attachment">
                        <span class="iconfont icon-qubiezhen"></span>
                        <span class="n">3</span>
                      </div>
                      <div class="comments">
                        <span class="icon-xinxi iconfont"></span>
                        <span class="n">15</span>
                      </div>
                    </div>
                  </div>
                  <div class="taskcard-dragger">
                    <span class="icon-shenglve1 iconfont"></span>
                  </div>
                  <div class="taskcard-ribbon">
                    <span class="badge">New</span>
                  </div>
                  <div class="task-expander">
                    <span class="iconfont icon-jiatianjia"></span>
                  </div>
                </div>
              </div>
              <div class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">Make Website Responsive</div>
                    <div class="taskdate">20/07/2019 at 03:10PM</div>
                  </div>
                  <div class="taskcard-dragger">
                    <span class="icon-shenglve1 iconfont"></span>
                  </div>
                  <div class="taskcard-ribbon">
                    <span class="badge">Important</span>
                  </div>
                </div>
              </div>
              <div v-for="(item, index) in list" :key="index" class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">{{ item.text }}</div>
                    <div class="taskdate">{{ item.time }}</div>
                  </div>
                  <div class="taskcard-dragger">
                    <span class="icon-shenglve1 iconfont"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3">
            <div class="taskpanel-title">In Process</div>
            <button class="btn">
              <span class="iconfont icon-jiatianjia"></span>
              <span>Add task</span>
            </button>
            <div class="taskpanel">
              <div class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">Education App Redesign</div>
                    <div class="taskdate">20/07/2019 at 03:10PM</div>
                    <div class="progress">
                      <div class="progress-bar"></div>
                    </div>
                    <div class="collapse">
                      <div class="task-details">
                        <div class="task-details__title">Checklist</div>
                        <ul class="task-checklist">
                          <li>
                            <div class="custom-control">
                              <input class="ipt" type="checkbox" />
                              <label class="label">
                                Make Wireframe Using Figma
                              </label>
                            </div>
                          </li>
                          <li>
                            <div class="custom-control">
                              <input class="ipt" type="checkbox" />
                              <label class="label">
                                Approve Design & Make PSD
                              </label>
                            </div>
                          </li>
                          <li>
                            <div class="custom-control">
                              <input class="ipt" type="checkbox" />
                              <label class="label">
                                Make PSD to Responsive
                              </label>
                            </div>
                          </li>
                          <li>
                            <div class="custom-control">
                              <input class="ipt" type="checkbox" />
                              <label class="label">
                                Test & Submit to Clients
                              </label>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="task-details__title">Deadline</div>
                      <div class="taskenddate">25/07/2019 at 12:00AM</div>
                      <div class="task-details__title">Members</div>
                      <div class="user-avatar-group">
                        <a href="#">
                          <div class="user-avatar"></div>
                        </a>
                        <a href="#">
                          <div class="user-avatar user-avatar1"></div>
                        </a>
                        <a href="#">
                          <div class="user-avatar user-avatar2"></div>
                        </a>
                        <a class="avatar-info" href="#">
                          <span>BB</span>
                        </a>
                        <a class="pk" href="#">
                          <span>+</span>
                        </a>
                      </div>
                    </div>
                    <div class="card-footer">
                      <div class="checklist-number">0/4</div>
                      <div class="taskinfo-footer">
                        <div class="attachment">
                          <span class="iconfont icon-qubiezhen"></span>
                          <span class="n">3</span>
                        </div>
                        <div class="comments">
                          <span class="icon-xinxi iconfont"></span>
                          <span class="n">15</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">Make Website Responsive</div>
                    <div class="taskdate">20/07/2019 at 03:10PM</div>
                  </div>
                  <div class="taskcard-dragger">
                    <span class="icon-shenglve1 iconfont"></span>
                  </div>
                  <div class="taskcard-ribbon">
                    <span class="badge">Important</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6 col-md-6 col-12">
            <div class="taskpanel-title">In Review</div>
            <button class="btn btn-primary-light newtaskbtn btn-block mb-3">
              <i class="iconfont icon-jiatianjia"></i>
              <span>Add task</span>
            </button>
            <div class="taskpanel" id="inReviewTask">
              <div class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">Shopping App Redesign</div>
                    <div class="taskdate">20/07/2019 at 03:10PM</div>
                  </div>
                  <div class="taskcard-dragger">
                    <i class="iconfont icon-shenglve1"></i>
                  </div>
                  <div class="card-footer taskpanel-footer">12</div>
                </div>
              </div>
              <div v-for="val in lis" :key="val.id" class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">
                      {{ val.title }}
                    </div>
                    <div class="taskdate">{{ val.time }}</div>
                  </div>
                  <div class="taskcard-dragger">
                    <i class="iconfont icon-shenglve1"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6 col-md-6 col-12">
            <div class="taskpanel-title">Completed</div>
            <button class="btn btn-primary-light newtaskbtn btn-block mb-3">
              <i class="iconfont icon-jiatianjia"></i>
              <span>Add task</span>
            </button>
            <div class="taskpanel" id="inReviewTask">
              <div class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">Shopping App Redesign</div>
                    <div class="taskdate">20/07/2019 at 03:10PM</div>
                  </div>
                  <div class="taskcard-dragger">
                    <i class="iconfont icon-shenglve1"></i>
                  </div>
                  <div class="card-footer taskpanel-footer">12</div>
                </div>
              </div>
              <div class="taskcard">
                <div class="card">
                  <div class="card-body">
                    <div class="taskname">Send an Email to Client</div>
                    <div class="taskdate">20/07/2019 at 03:10PM</div>
                  </div>
                  <div class="taskcard-dragger">
                    <i class="iconfont icon-shenglve1"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          text: 'Testing of Eductation Website Payment Modes',
          time: '20/07/2019 at 03:10PM',
          icon: 'icon-shenglve1',
        },
        {
          text: 'Send an Email to Client',
          time: '20/07/2019 at 03:10PM',
          icon: 'icon-shenglve1',
        },
        {
          text: 'Submit Website to the Client',
          time: '20/07/2019 at 03:10PM',
          icon: 'icon-shenglve1',
        },
        {
          text: 'Find Issue in Video App Project',
          time: '20/07/2019 at 03:10PM',
          icon: 'icon-shenglve1',
        },
        {
          text: 'Testing of Eductation Website Payment Modes',
          time: '20/07/2019 at 03:10PM',
          icon: 'icon-shenglve1',
        },
        {
          text: 'Send an Email to Client',
          time: '20/07/2019 at 03:10PM',
          icon: 'icon-shenglve1',
        },
        {
          text: 'Make Website Responsive',
          time: '20/07/2019 at 03:10PM',
          icon: 'icon-shenglve1',
        },
      ],
      lis: [
        {
          id: 1,
          title: 'Testing of Eductation Website Payment Modes',
          time: '20/07/2019 at 03:10PM',
        },
        {
          id: 2,
          title: 'Testing Payment Modes',
          time: '20/07/2019 at 03:10PM',
        },
        { id: 3, title: 'Checking Security', time: '20/07/2019 at 03:10PM' },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
@import url('./icfont.css');
* {
  margin: 0;
  padding: 0;
}
*,
::after,
::before {
  box-sizing: border-box;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
}
.box {
  display: flex;
  flex: 1 1 auto;
  .box-content {
    width: 100%;
    max-width: 93.75rem;
    margin: 0 auto;
    .container-fluid {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
      .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
        .col-12 {
          flex: 0 0 100%;
          max-width: 100%;
          position: relative;
          width: 100%;
          padding-right: 15px;
          padding-left: 15px;
          .pt-3 {
            padding-top: 1rem !important;
            font-size: 1rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
            line-height: 1.2;
            margin-top: 0;
          }
        }
        .col-lg-3 {
          flex: 0 0 25%;
          max-width: 25%;
          position: relative;
          width: 100%;
          padding-right: 15px;
          padding-left: 15px;
          .card {
            background: #fff;
            margin-bottom: 0.5rem !important;
            margin-top: 0.5rem !important;
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            border: 1px solid rgba(0, 0, 0, 0.125);
            border-radius: 0.25rem;
            .card-body {
              flex: 1 1 auto;
              padding: 1.25rem;
              .taskbox {
                display: flex;
                align-items: center;
                .taskbox__icon {
                  background: #f4ebfc;
                  padding: 0.625rem 0.625rem;
                  border-radius: 0.5rem;
                  margin-right: 0.625rem;
                }
                .taskbox__text {
                  display: flex;
                  flex-direction: column;
                  .taskbox__text--numbers {
                    font-weight: 700;
                    font-size: 1.5rem;
                    line-height: 1;
                  }
                  .taskbox__text--heading {
                    color: #8d9093;
                    font-weight: 500;
                    font-size: 0.8125rem;
                  }
                }
              }
            }
          }
        }
      }
      hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: content-box;
        height: 0;
        overflow: visible;
      }
      .row1 {
        padding-top: 1rem !important;
        margin-bottom: 3rem !important;
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
        .col-xl-3 {
          flex: 0 0 25%;
          max-width: 25%;
          position: relative;
          width: 100%;
          padding-right: 15px;
          padding-left: 15px;
          .taskpanel-title {
            color: #fff;
            background: #ae6eea;
            text-transform: uppercase;
            font-weight: 600;
            font-size: 0.75rem;
            margin: 0.9rem 0;
            padding: 1px 0.625rem;
            border-radius: 0.1875rem;
            display: inline-block;
          }
          .btn {
            color: #ae6eea;
            background-color: #f4ebfc;
            border-color: #f4ebfc;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem !important;
            width: 100%;
            text-align: center;
            vertical-align: middle;
            user-select: none;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            transition: color 0.15s ease-in-out,
              background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
            text-transform: none;
            overflow: visible;
            &:hover {
              color: #9b4de5;
              background-color: #e0c7f7;
              border-color: #e0c7f7;
            }
            .icon-jiatianjia {
              margin-right: 0.625rem;
              display: inherit;
            }
          }
          .taskpanel {
            background: #f8f9fa;
            height: calc(100% - 6.25rem);
            padding: 0.625rem;
            border-radius: 0.5rem;
            .taskcard {
              cursor: pointer;
              user-select: none;
              margin-bottom: 1rem;
              position: relative;
              .card {
                background: #fff;
                position: relative;
                display: flex;
                flex-direction: column;
                min-width: 0;
                word-wrap: break-word;
                border: 1px solid rgba(0, 0, 0, 0.125);
                border-radius: 0.25rem;
                .card-body {
                  padding: 1.65rem 1.25rem 1.25rem;
                  flex: 1 1 auto;
                  .taskname {
                    font-weight: 550;
                    font-size: 0.875rem;
                    color: #3e4247;
                  }
                  .taskdate {
                    color: #a2a2a2;
                    font-size: 0.6875rem;
                  }
                  .progress {
                    height: 3px;
                    margin-top: 1rem !important;
                    display: flex;
                    overflow: hidden;
                    font-size: 0.75rem;
                    background-color: #e9ecef;
                    border-radius: 0.25rem;
                    .progress-bar {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      color: #fff;
                      text-align: center;
                      white-space: nowrap;
                      background-color: #ae6eea;
                      transition: width 0.6s ease;
                      width: 25%;
                    }
                  }
                  .collapse {
                    .task-details {
                      padding-top: 1rem !important;
                      .task-details__title {
                        color: #949aa2;
                        font-size: 0.625rem;
                        font-weight: 700;
                        text-transform: uppercase;
                        padding: 1.25rem 0 0.3125rem;
                      }
                      .task-checklist {
                        padding: 0;
                        padding-top: 0.3125rem;
                        margin: 0;
                        list-style-type: none;
                        font-size: 0.8125rem;
                        font-weight: 500;
                        li {
                          .custom-control {
                            position: relative;
                            display: block;
                            min-height: 1.5rem;
                            padding-left: 1.5rem;
                            .ipt {
                              position: absolute;
                              z-index: -1;
                              opacity: 0;
                              overflow: visible;
                              box-sizing: border-box;
                              padding: 0;
                              margin: 0;
                              font-family: inherit;
                              font-size: inherit;
                              line-height: inherit;
                            }
                            .label {
                              position: relative;
                              margin-bottom: 0;
                              vertical-align: top;
                              display: inline-block;
                              &::before {
                                top: 1px;
                                border-radius: 6.25rem;
                                position: absolute;
                                left: -1.5rem;
                                display: block;
                                width: 1rem;
                                height: 1rem;
                                pointer-events: none;
                                content: '';
                                background-color: #fff;
                                border: #adb5bd solid 1px;
                              }
                            }
                          }
                        }
                      }
                    }
                    .task-details__title {
                      color: #949aa2;
                      font-size: 0.625rem;
                      font-weight: 700;
                      text-transform: uppercase;
                      padding: 1.25rem 0 0.3125rem;
                    }
                    .taskenddate {
                      font-size: 0.8125rem;
                      font-weight: 500;
                    }
                    .task-details__title {
                      color: #949aa2;
                      font-size: 0.625rem;
                      font-weight: 700;
                      text-transform: uppercase;
                      padding: 1.25rem 0 0.3125rem;
                    }
                    .user-avatar-group {
                      flex-wrap: wrap;
                      display: flex;
                      align-items: center;
                      a {
                        border: 2px solid #fff;
                        margin-left: 0;
                        border-radius: 100%;
                        display: inline-block;
                        position: relative;
                        z-index: 0;
                        transition: all 0.2s ease;
                        color: #ae6eea;
                        text-decoration: none;
                        background-color: transparent;
                        .user-avatar {
                          background-position: -245px -5px;
                          background-image: url('./img/spritesheet.png');
                          background-repeat: no-repeat;
                          display: block;
                          width: 3.125rem;
                          height: 3.125rem;
                          border-radius: 6.25rem;
                          margin-right: 1rem;
                        }
                        .user-avatar1 {
                          background-position: -185px -5px;
                        }
                        span {
                          color: inherit;
                          width: 3.125rem;
                          height: 3.125rem;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          font-weight: 600;
                        }
                        .user-avatar2 {
                          background-position: -125px -5px;
                        }
                      }
                      .avatar-info {
                        background: #c5ecfe;
                        color: #ae6eea;
                      }
                      .pk {
                        background: #ecddfa;
                        color: #ae6eea;
                      }
                    }
                  }
                }
                .card-footer {
                  background: #fff;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 0.45rem 1.25rem;
                  border-top: 1px solid rgba(0, 0, 0, 0.125);
                  .checklist-number {
                    color: #a2a2a2;
                    font-size: 0.875rem;
                  }
                  .taskinfo-footer {
                    display: flex;
                    .attachment {
                      color: #a2a2a2;
                      padding: 0 0.3125rem;
                      line-height: 1;
                      display: flex;
                      align-items: center;
                      .icon-qubiezhen {
                        display: inline-flex;
                        margin-right: 0.25rem;
                        color: #949aa2;
                      }
                      .n {
                        font-size: 0.875rem;
                        font-weight: 500;
                        color: #a2a2a2;
                      }
                    }
                    .comments {
                      color: #a2a2a2;
                      padding: 0 0.3125rem;
                      line-height: 1;
                      display: flex;
                      align-items: center;
                      .icon-xinxi {
                        display: inline-flex;
                        margin-right: 0.25rem;
                        color: #949aa2;
                      }
                      .n {
                        font-size: 0.875rem;
                        font-weight: 500;
                      }
                    }
                  }
                }
                .taskcard-dragger {
                  position: absolute;
                  top: -0.3125rem;
                  left: 50%;
                  transform: translateX(-50%);
                  .icon-shenglve1 {
                    color: #949aa2;
                  }
                }
                .taskcard-ribbon {
                  position: absolute;
                  top: -0.3125rem;
                  left: -1px;
                  .badge {
                    font-weight: 600;
                    border-radius: 0.25rem 0 0.25rem 0;
                    background: #ae6eea;
                    color: #fff;
                    display: inline-block;
                    padding: 0.25em 0.4em;
                    font-size: 75%;
                    line-height: 1;
                    text-align: center;
                    white-space: nowrap;
                    vertical-align: baseline;
                    transition: color 0.15s ease-in-out,
                      background-color 0.15s ease-in-out,
                      border-color 0.15s ease-in-out,
                      box-shadow 0.15s ease-in-out;
                  }
                }
                .task-expander {
                  position: absolute;
                  top: 0;
                  right: 0.3125rem;
                  .icon-jiatianjia {
                    color: #949aa2;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
